<template>
  <el-dialog
    title="合同内容"
    :visible.sync="dialogVisible"
    width="60%"
  >
  <!-- 配置属性
    :page : 显示的页码
    :src='' 文件的路径
    :rotate 旋转的角度 90的倍数
      @num-pages="pageCount = $event"  获取总页码
			@page-loaded="currentPage = $event" 获取当前的页码
   -->
    <hr>
    <el-button type="primary" @click="num--">上一页</el-button>
    <el-button type="primary" @click="num++">下一页</el-button>
    <hr>  
    <!-- 第一种写法 -->
      <p> {{currentPage}} / {{pageCount}}</p>   
      <el-button type="primary" @click="print">打印合同</el-button>    
    <pdf src="./houtai.pdf" 
      ref="myPdf" 
      :page='num'
      @num-pages="pageCount = $event"
			@page-loaded="currentPage = $event"
      style="display: inline-block; width: 700px"
      >
      </pdf>
      <!-- 展示所有的pdf文件 -->
      <!-- <pdf
			v-for="i in numPages"
			:key="i"
			:src="src"
			:page="i"
			style="display: inline-block; width: 25%">
      </pdf> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('./sxt.pdf'); 
export default {
    components:{
        pdf
    },
  data() {
    return {
      dialogVisible: false,
      num:1,
      currentPage:0,
      pageCount:0,
      numPages:undefined,
      src:loadingTask,  
    };
  },
  mounted() {
    this.src.promise.then(pdf => {
			this.numPages = pdf.numPages;
		});
  },
  methods: {
    print(){
    this.$refs.myPdf.print();
    }
  },
};
</script>

<style>
</style>